<template>
  <section class="shop">
    <!-- 首页头部组件 -->
    <HeaderTop></HeaderTop>
    <!-- 首页种类列表 -->
    <CategoryList></CategoryList>
    <!--首页轮播-->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item
        ><img
          src="https://p0.meituan.net/wmbanner/cad13591ad0eb89515bad8cc394739d5124198.jpg@602w"
          alt=""
      /></van-swipe-item>
      <van-swipe-item
        ><img
          src="https://p0.meituan.net/wmbanner/0acea4ba5704d56f13d78ad175b2cc5538158.png@602w"
          alt=""
      /></van-swipe-item>
    </van-swipe>
    <!--商品资料卡和筛选种类-->
    <FoodCard></FoodCard>
  </section>
</template>

<script>
import { defineComponent } from 'vue'
// 引入头部导航自定义组件
import HeaderTop from '@/components/foodContent/headerTop.vue'
// 引入种类列表自定义组件
import CategoryList from '@/components/foodContent/categoryList.vue'
// 引入商品卡片组件
import FoodCard from '@/components/foodContent/foodCard.vue'
export default defineComponent({
  components: {
    HeaderTop,
    CategoryList,
    FoodCard
  }
})
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
.shop {
  background: rgb(245, 245, 246);
}
// 轮播图
.my-swipe {
  margin: 0 0.15rem;
  border-radius: 0.15rem;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 0.2rem;
  line-height: 0.98rem;
  text-align: center;
  background-color: #39a9ed;

  img {
    width: 100%;
    height: 100%;
    display: block;
  }
}
</style>
